<template>
    <div>
        <Form :label-width="110" ref="formInline" :model="formInline">
            <div v-if="switchFlag">
                <Row :gutter="16" class="query-form" >
                    <i-col span="8">
                        <FormItem label="单位名称：" prop="orgName">
                            <Input v-model="formInline.orgName" placeholder="请填写单位名称"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="职务：" prop="position">
                            <Select v-model="formInline.position">
                                <Option v-for="item in postList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="答卷日期：" prop="se_date">
                            <DatePicker v-model="formInline.se_date" type="datetimerange" style="width: 100%" format="yyyy-MM-dd HH:mm" placeholder="请选择上报时间（开始，结束）"></DatePicker>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="现任安全总监姓名：" prop="safetyDirectorName">
                            <Input v-model="formInline.safetyDirectorName" placeholder="请填写现任安全总监姓名"/>

                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="现任安全总监职务：" prop="se_date">
                            <Select v-model="formInline.safetyDirectorPosition">
                                <Option v-for="item in directorPostList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="现任安全总监任职资格：" prop="se_date">
                            <Select v-model="formInline.safetyDirectorQualification">
                                <Option v-for="item in qualificationsList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </i-col>

                </Row>
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="安全总监履职情况：" prop="se_date">
                            <Select v-model="formInline.safetyDirectorPerform">
                                <Option v-for="item in evaluateList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="是否延续任命现任安全总监：" prop="se_date">
                            <Select v-model="formInline.currentDirectorAppointed">
                                <Option v-for="item in whetherList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
            <div v-else>
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                        <FormItem label="单位名称：" prop="orgName">
                            <Input v-model="formInline.orgName" placeholder="请填写单位名称"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="职务：" prop="position">
                            <Select v-model="formInline.position">
                                <Option v-for="item in postList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text" >展开<Icon type="ios-arrow-down"/></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
        </Form>
        <Row type="flex" justify="start" class="query-form">
            <i-col>
                <Button icon="md-cloud-download" class="ivu-btn-add" @click="exportExcel">导出</Button>
            </i-col>
        </Row>
        <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns" no-data-text="没有查询到相关数据！"
               :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>

        <Row type="flex" justify="end" >
            <i-col>
                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </i-col>
        </Row>
    </div>
</template>

<script>

    import {Api} from '../../../api'
    import {formatDate} from '@/tools/index'
    export default {
        name: "questionnaireList",
        data(){
            return{
                switchFlag: false,
                formInline: {
                    se_date: []
                },
                tableHeight: '',
                loading: false,
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                pageSizeArray: [10, 20, 50],
                columns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '单位名称',
                        align: 'center',
                        key: 'orgName',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.orgName || '--')
                            ]);
                        }
                    },
                    {
                        title: '职务',
                        align: 'center',
                        key: 'position',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.position || '--')
                            ]);
                        }
                    },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'userName',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.userName || '--')
                            ]);
                        }
                    },
                    {
                        title: '单位现任安全总监姓名',
                        align: 'center',
                        key: 'safetyDirectorName',
                        minWidth: 160,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.safetyDirectorName || '--')
                            ]);
                        }
                    },
                    {
                        title: '单位现任安全总监职务',
                        align: 'center',
                        key: 'safetyDirectorPosition',
                        minWidth: 160,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.safetyDirectorPosition || '--')
                            ]);
                        }
                    },
                    {
                        title: '现任安全总监任职资格',
                        align: 'center',
                        key: 'safetyDirectorQualification',
                        minWidth: 160,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.safetyDirectorQualification || '--')
                            ]);
                        }
                    },
                    {
                        title: '安全总监履职情况',
                        align: 'center',
                        key: 'safetyDirectorPerform',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.safetyDirectorPerform || '--')
                            ]);
                        }
                    },
                    {
                        title: '是否延续任命现任安全总监',
                        align: 'center',
                        key: 'currentDirectorAppointed',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.currentDirectorAppointed || '--')
                            ]);
                        }
                    },
                    {
                        title: '是否可以将现任安全总监提为单位经理助理',
                        align: 'center',
                        key: 'promotionAssistantManager',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.promotionAssistantManager || '--')
                            ]);
                        }
                    },
                    {
                        title: '是否可以让现任安全总监享受经理助理薪资待遇',
                        align: 'center',
                        key: 'enjoyPromotionAssistantSalary',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.enjoyPromotionAssistantSalary || '--')
                            ]);
                        }
                    },
                    {
                        title: '拟推荐人员是否可以提为经理助理',
                        align: 'center',
                        key: 'candidatePromotionAssistant',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.candidatePromotionAssistant || '--')
                            ]);
                        }
                    },
                    {
                        title: '拟推荐人员是否可以给予经理助理薪资待遇',
                        align: 'center',
                        key: 'enjoyCandidatePromotionAssistantSalary',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.enjoyCandidatePromotionAssistantSalary || '--')
                            ]);
                        }
                    },
                    {
                        title: '答卷时间',
                        align: 'center',
                        key: 'createDate',
                        minWidth: 180,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', this.formatDate(new Date(params.row.createDate), 'yyyy-MM-dd') || '--')
                            ]);
                        }
                    }
                ],
                infos: [],
                postList: [
                    {
                        id: '书记',
                        name: '书记'
                    },
                    {
                        id: '经理',
                        name: '经理'
                    },
                ],
                evaluateList: [
                    {
                        id: '优秀',
                        name: '优秀'
                    },
                    {
                        id: '良好',
                        name: '良好'
                    },
                    {
                        id: '一般',
                        name: '一般'
                    },
                    {
                        id: '较差',
                        name: '较差'
                    },
                ],
                qualificationsList: [
                    {
                        id: '工程师',
                        name: '工程师'
                    },
                    {
                        id: '注安师',
                        name: '注安师'
                    },
                    {
                        id: '无',
                        name: '无'
                    },
                ],
                directorPostList: [
                    {
                        id: '企业副总',
                        name: '企业副总'
                    },
                    {
                        id: '经理助理',
                        name: '经理助理'
                    },
                    {
                        id: '安全管理部门负责人',
                        name: '安全管理部门负责人'
                    },
                ],
                whetherList: [
                    {
                        id: '是',
                        name: '是'
                    },
                    {
                        id: '否',
                        name: '否'
                    }
                ],
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.query();
        },
        methods: {
            query(){
                this.loading = true;
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                };
                if(this.formInline.se_date.length!=0){
                    this.formInline.startDate = this.formInline.se_date[0];
                    this.formInline.endDate = this.formInline.se_date[1];
                }
                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.questionnaire, {
                    params: data
                }).then(function(res){
                    this.infos = res.data.data;
                    this.pagedata.total = res.data.totalSize;
                    this.loading = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });
            },
            cancel(){
                this.formInline = {
                    se_date: []
                };
                this.query();
            },
            switchQuery(flag){
                this.switchFlag = flag;
                if(this.switchFlag) {
                    this.tableHeight = this.tableHeight - 116;
                }else{
                    this.tableHeight = this.tableHeight + 116;
                }
            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            exportExcel(){
                let data = {};
                if(this.formInline.se_date.length!=0){
                    this.formInline.startDate = this.formInline.se_date[0];
                    this.formInline.endDate = this.formInline.se_date[1];
                }
                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.questionnaire + '/export',{
                    params: data,
                    responseType: 'arraybuffer'
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    })
                    aLink.href = URL.createObjectURL(blob);
                    aLink.download = "安全总监设立问卷调查表("+ formatDate(new Date(), "yyyy-MM-dd")+ ").xlsx" //标题
                    aLink.click();
                    document.body.appendChild(aLink);
                })
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            }
        }
    }
</script>

<style scoped>

</style>
